import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import SearchSelect from 'Shared/components/SearchSelect';
import {formatMessage} from '../localize';
import SelectPanel from './SelectPanel';
import SeniorModal from '../SeniorModal';

const EMPTY_ARRAY = [];

const labelMap = item => `${item.name}`;

class FaultItemSelectEdit extends PureComponent {
    state = {showModal: false};

    onSearch = filter => this.props.getFaultItemQuickly(Object.assign({filter}, this.props.conditions))
        .then(result => result.ok ? result.data.content : EMPTY_ARRAY);

    onClickSearchBtn = () => this.setState({showModal: true});

    onClose = () => this.setState({showModal: false});

    onSelect = (record = {}) => {
        this.setState({showModal: false});
        this.props.onSelect(record.id ? record : {}, this.props.id);
    };
    
    render() {
        return [
            <SearchSelect
                key="select"
                allowClear={this.props.allowClear}
                searchOnFocus={this.props.searchOnFocus}
                value={this.props.value}
                placeholder={formatMessage({
                    id: 'faultItemSelectEdit.placeholder',
                    defaultMessage: '请输入编号或名称查询'
                })}
                keyIndex="id"
                labelMap={labelMap}
                onSelect={this.onSelect}
                onSearch={this.onSearch}
                onClickSearchBtn={this.onClickSearchBtn}/>,
            <SeniorModal key="modal" visible={this.state.showModal} title={formatMessage({
                id: 'faultItemSelectEdit.modal.title',
                defaultMessage: '选择故障代码'
            })} maskClosable={false} footer={null} destroyOnClose={true} onCancel={this.onClose}>
                <SelectPanel
                    onSelect={this.onSelect}
                    getFaultItem={this.props.getFaultItem}
                    getCategoriesTop={this.props.getCategoriesTop}
                    getCategories={this.props.getCategories}
                    conditions={this.props.conditions} />
            </SeniorModal>
        ];
    }
}

import * as api from './api';

const EMPTY_OBJECT = {};

FaultItemSelectEdit.defaultProps = {
    allowClear: true,
    searchOnFocus: true,
    getFaultItemQuickly: api.getFaultItemQuickly,
    getFaultItem: api.getFaultItem,
    getCategoriesTop: api.getCategoriesTop,
    getCategories: api.getCategories,
    conditions: EMPTY_OBJECT
};

FaultItemSelectEdit.propTypes = {
    /**
     * 选中后回调，(record, props.id)
     */
    onSelect: PropTypes.func.isRequired,
    allowClear: PropTypes.bool,
    conditions: PropTypes.object,
    getCategories: PropTypes.func,
    getCategoriesTop: PropTypes.func,
    getFaultItem: PropTypes.func,
    getFaultItemQuickly: PropTypes.func,
    /**
     * 查询服务站API，为空取默认API
     */
    id: PropTypes.string,
    searchOnFocus: PropTypes.bool,
    value: PropTypes.shape({
        id: PropTypes.string,
        code: PropTypes.string,
        name: PropTypes.string
    }),
};

export default FaultItemSelectEdit;
